<template>
  <div>
    <!--  头部  -->
    <header>
      <nav-top :classId="hotId"></nav-top>
    </header>
    <section>
      <!--   主体界面   -->
      <div class="main">
        <!--    热榜界面    -->
        <div class="content">
          <div class="nav-top">
            <div
              class="nav-item"
              v-for="(nav_item, nav_index) in navTopName"
              :key="nav_index"
              @click="selectNavTop(nav_item.id,nav_index)"
              :class="{ active: is_nav === nav_index }"
            >{{ nav_item.topic_name }}</div>
          </div>
          <div class="hot-items">
            <div class="hot-item-all" v-for="(hot_item, hot_index) in hotItems" :key="hot_index">
              <span>{{ hot_index + 1 }}</span>
              <div class="hot-info">
                <h4  @click="$router.push({path:'/articleInfo',query:{id:hot_item.id,type:2}})">{{ hot_item.title }}</h4>
                <p>{{ hot_item.articlecontent }}</p>
                <div>
                  <div>
                    <i class="icon-hot"></i>
                    {{ hot_item.count?hot_item.count:0 }} 热度
                  </div>
                  <div>
                    <i class="icon-share"></i>分享
                  </div>
                </div>
              </div>
              <div>
                <img :src="hot_item.hot_img" alt />
              </div>
            </div>
          </div>
        </div>
        <!--    右侧导航    -->
        <nav-right></nav-right>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "hot",
  data() {
    return {
      hotId: 2,
      is_nav: 0,
      navTopName: [],
      hotItems: [],
      page: 1,
      type: "",
    };
  },
  methods: {
    selectNavTop(type, index) {
      if (this.is_nav != index) {
        //防重复
        this.hotItems = ""; //清空列表
        this.is_nav = index; //选中样式
        this.page = 1; //分页
        this.type = type; //分类id
        this.getTopicQuestion(); //调取数据
      }
    },
    getTopicQuestion() {
      this.$axios({
        method: "POST",
        url: "api/Main/gettopicquestion",
        data: {
          type: this.type,
          page: this.page
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.hotItems = res.data.data;
          this.page++;
        } else {
          console.log("无更多数据~");
        }
      });
    }
  },
  computed: {},
  created() {
    this.$axios({
      method: "POST",
      url: "api/Main/getTopic"
    }).then(res => {
      if (res.data.code === 200) {
        this.navTopName = res.data.data;
        this.type = res.data.data[0].id;
        this.getTopicQuestion();
      } else {
        console.log("数据异常，无分类信息~");
      }
    });
  }
};
</script>

<style scoped lang="less">
header {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
}
section {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 15px;
  margin-top: 55px;
  background-color: #f6f6f6;
  .main {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    .content {
      width: 69%;
      height: 100%;
      border-radius: 2px;
      box-sizing: border-box;
      box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
      .nav-top {
        display: flex;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
        .nav-item {
          padding: 5px 15px;
          margin-right: 10px;
          font-size: 15px;
          text-align: center;
          border-radius: 3px;
          color: #4b4b4b;
          background-color: rgba(75, 75, 75, 0.1);
          cursor: pointer;
          &:hover {
            color: #6b9147;
            background-color: rgba(107, 145, 71, 0.1);
          }
        }
        .active {
          color: #6b9147;
          background-color: rgba(107, 145, 71, 0.1);
        }
      }
      .hot-items {
        .hot-item-all {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          padding: 20px 15px;
          box-sizing: border-box;
          background-color: #fff;
          & > span {
            font-size: 17px;
            font-weight: bold;
            color: #ff9402;
          }
          .hot-info {
            width: 60%;
            h4 {
              line-height: 25px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              cursor: pointer;
            }
            p {
              margin: 25px 0;
              font-size: 15px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }
            div {
              display: flex;
              font-size: 14px;
              & > div {
                display: flex;
                align-items: center;
                margin-right: 30px;
                font-size: 14px;
                color: #95998f;
              }
              & > div:last-child {
                cursor: pointer;
              }
              i {
                display: inline-block;
                margin-right: 5px;
                width: 17px;
                height: 17px;
                background-size: 100% 100%;
              }
              .icon-share {
                width: 14px;
                height: 14px;
              }
            }
          }
          & > div:last-child {
            width: 35%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
